<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue-2.4.0.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 1.搭建静态 -->
      <!-- 2.分析数据(死数据，活数据) -->
      <!-- 3.逻辑处理 -->
      <button @click="start" :disabled="isDisabled">浪起来</button>
      <button @click="stop" :disabled="!isDisabled">低调</button>
      <div>{{msg}}</div>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          isDisabled: false,
          msg: "猥琐发育，别浪~~！",
          timer: null,
        },
        methods: {
          start() {
            // 按钮禁用
            this.isDisabled = !this.isDisabled;
            this.timer = setInterval(() => {
              // 箭头函数中this指向他的父作用域
              // 定时器中this指向window
              console.log(this);
              // 第一个字
              let fist = this.msg.slice(0, 1);
              // 后续的字
              let next = this.msg.slice(1);
              this.msg = next + fist;
            }, 500);
          },
          stop() {
            this.isDisabled = !this.isDisabled;
            clearInterval(this.timer);
          },
        },
      });
    </script>
  </body>
  <script>
    // function fn() {
    //   console.log(this);
    // }
    // window.fn();

    // this指向其实是谁调用函数就指向谁

    // var timer = setInterval(() => {
    //     console.log('测试');
    // }, 1000)
    // console.log(timer);
  </script>
</html>
